<script setup>
import { useRoute } from 'vue-router'
import TabBar from '@/components/tab-bar/tab-bar.vue'
import Loading from './components/loading/loading.vue';

const route = useRoute()
</script>

<template>
  <div class="app">
    <!-- 使用 keep-alive 组件，实现数据缓存，减少页面切换时网络请求的次数 -->
    <router-view v-slot="props">
      <keep-alive include="home">
        <component :is="props.Component"></component>
      </keep-alive>
    </router-view>
    <!-- 
      使用 v-if 会销毁/创建组件，这样可能会导致一些意外的bug，如通过$route设置的一些功能没有生效等
      原因：因为组件会被销毁和重新创建，组件重新创建时，对 $route 监听的时间点很难把控，所以使用 v-show 会更加合适
     -->
    <!-- v-show 通过display:none隐藏/显示元素 -->
    <tab-bar v-show="!route.meta.hideTabBar"></tab-bar>
    <!-- 网络请求数据时的加载图标 -->
    <loading />
  </div>
</template>

<style lang="less" scoped>

</style>